<template>
    <div class="home">
      <div class="main">
        <img src="@\assets\xxxhdpi\编组 5.png" width="460" height="540" />
        <a-typography class="login">
        
          <a-typography-paragraph>
            <a-form
              class="form"
              :model="formState"
              name="basic"
              :label-col="{ span: 0 }"
              :wrapper-col="{ span: 24 }"
              autocomplete="off"
              @finish="applyTest"
            >  
              <a-form-item name="phone" :rules="[{ validator:phoneValidate,trigger: ['blur'] }]">
                <a-input id="phone" v-model:value="formState.phone" placeholder="手机号" class="default-height">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\name-icon.png" width="16" height="16" />
                  </template>
                </a-input>
              </a-form-item>

              <a-form-item name="code" :rules="[{ required: true, message: '请输入验证码' }]" >
                <a-input v-model:value="formState.code" placeholder="验证码" class="default-height" auto-complete='new-password' style="width: 228px">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\code-icon.png" width="16" height="16" />
                  </template>
                </a-input>
                <a-button class="getCode default-height" :disabled="codeState.codeDisabled" :class="{getCodeDisable:codeState.codeDisabled}" @click="getCode" >{{codeState.codeDisabled?'('+codeState.time+')':'获取验证码'}}</a-button>
              </a-form-item>
              <a-form-item name="code" style="width: 0; height: 0; overflow: hidden;margin-bottom: 0;">
                <a-input placeholder="验证码" class="default-height" auto-complete='new-password'>
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\code-icon.png" width="16" height="16" />
                  </template>
                </a-input>
              </a-form-item>
              <a-form-item name="phonpassworde1" style="width: 0; height: 0; overflow: hidden;margin-bottom: 0;">
                <a-input-password   placeholder="新密码" auto-complete='new-password' class="default-height">
                </a-input-password>
              </a-form-item>
              <a-form-item name="password" :rules="[{required:true,validator:passWordValidate }]">
                <a-input-password id="password"  v-model:value="formState.password" placeholder="新密码" auto-complete='new-password' class="default-height">
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\passWord-icon.png" width="16" height="16" />
                  </template>
                </a-input-password>
              </a-form-item>
              <a-form-item name="confirmPassword" :rules="[{required:true,validator:passWordConfirmValidate, }]"> 
                <a-input-password id="confirmPassword"  v-model:value="formState.confirmPassword" placeholder="再次确认" class="default-height" >
                  <template #prefix>
                    <img src="@\assets\xxxhdpi\passWord-icon.png" width="16" height="16" />
                  </template>
                </a-input-password>
              </a-form-item>
  
              <a-form-item>
                <a-button type="primary" html-type="submit" :disabled="disabled" style="width: 100%; height: 48px"
                  >重置密码</a-button
                >
              </a-form-item>
              <div style="text-align: center;">
                <RouterLink to="/" class="back-login">返回登录</RouterLink>
              </div>
            </a-form>
          </a-typography-paragraph>
        </a-typography>
      </div>
    </div>  
  </template>
  <script lang="ts" setup>
  import { usePassword } from '@/hook/usePassword';
  import { useUserInfoStore } from '@/stores/modules/userInfo'
  import { reactive, computed,onMounted,nextTick } from 'vue'
  import { useRouter } from 'vue-router'
  const {
    formState,
    codeState,
    phoneValidate,
    passWordValidate,
    passWordConfirmValidate,
    getCode,
    applyTest
  } = usePassword({callback: () => router.push('/')})

  


  const router = useRouter()
 
 const disabled = computed(()=> {
    return  !formState.phone || !formState.confirmPassword || !formState.code || !formState.password
  })
  const userStore = useUserInfoStore()
  
  
  </script>
  
  <style lang="scss" scoped>
    .home {
      display: flex;
      margin: 0 auto;
      justify-items: center;
      position: relative;
      height: 100vh;
      justify-content: center;
      align-items: center;
      .applyTest{
        position: absolute;
        top: 40px;
        right: 40px;
        background: #3A76F6;
      }
    }
    .main {
      display: flex;
      flex-flow: row nowrap;
      border-radius: 16px;
      box-shadow: 0px 20px 40px 10px rgba(184, 198, 223, 0.1);
    }
    .login {
      width: 460px;
      background: white;
      box-sizing: border-box;
      padding: 124px 32px 32px;
      border-radius: 0 16px 16px 0;
      .default-height{
        height: 48px;
      }
      .getCode{
        float: right;
        background: #3C7BFF;
        color: #fff;
        width: 136px;
      }
      .getCodeDisable{
        background: #E5E5E5;
        color: #646464;
      }
    }
    .back-login{
        color: #646464;
    }
    input:-webkit-autofill {
      display: none;
      background-image: none;
      background-color: transparent
    
    }
    input:autofill {
      display: none;
      background-image: none;
      background-color: transparent
    }
  </style>
  